﻿
<!--
https://github.com/netnr
https://gitee.com/netnr
https://www.netnr.com
https://zme.ink
-->


<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' />


    <title>代码格式化 脚本服务</title>

    <meta name="keywords" content="netnr NET牛人 代码格式化" />
    <meta name="description" content="Script Services Js、Css、Html、TypeScript、Yaml" />

</head>
<body>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jzjs@2.0.2/2.0.2/jz.min.js'></script>
<link href='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.js' defer async></script>
        <link href="/css/global.css?v=NAI_hOr6ZSg5NjaPo94olMdf7kAXXyp9gYOiuK69lLE" rel="stylesheet" />
        <script src="/js/global.js?v=-UUx_lkaONxBXMxYH5RB2QtqMLBOuqV077SxjKI08E4"></script>
            <!--导航-->
            <button type="button" class="MenuToggle show-in-mobile btn btn-lg btn-warning ml-3 mt-3">
                <span class="fa fa-align-justify"></span>
            </button>
            <div class="netnrnav horizontal">
                <div class="netnrnav-wrapper">
                    <ul>
                        <li><a href="https://www.netnr.com" class="siteIcon"><img src="/favicon.ico" /> 首页</a></li>
                        <li><a href="https://www.netnr.com/gist/discover" title="代码片段"><span class="fa fa-fw fa-file-code-o"></span> Gist</a></li>
                        <li><a href="https://www.netnr.com/run/discover" title="在线运行代码"><span class="fa fa-fw fa-play"></span> Run</a></li>
                        <li><a href="https://www.netnr.com/doc" title="文档管理"><span class="fa fa-fw fa-book"></span> Doc</a></li>
                        <li><a href="https://www.netnr.com/draw/discover" title="绘制"><span class="fa fa-fw fa-paint-brush"></span> Draw</a></li>
                        <li><a href="/" title="ss.js.org"><span class="fa fa-fw fa-wrench"></span> 服务</a></li>
                        <li style="background-image: radial-gradient(ellipse, white, rgb(227, 248, 240))">
                            <!--标题-->
                                <a href='javascript:location.reload(false)' title="Js、Css、Html、TypeScript、Yaml">
                                    <svg class="titleicon"><use xlink:href="#formatter"></use></svg> &#x4EE3;&#x7801;&#x683C;&#x5F0F;&#x5316;
                                </a>
                        </li>
                        <li>
                            <a class="text-muted"><span class="fa fa-fw fa-ellipsis-h"></span></a>
                            <ul>
                                <li><a target="_blank" title="码云" href="https://gitee.com/netnr"><i class="fa fa-fw fa-git"></i> Gitee <sup><i class="fa small fa-external-link"></i></sup></a></li>
                                <li><a target="_blank" title="GitHub" href="https://github.com/netnr"><i class="fa fa-fw fa-github"></i> GitHub <sup><i class="fa small fa-external-link"></i></sup></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        <div class="min300 mt-3">
            <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="mb-2">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button class="btn btn-warning" id="btnFormatter" title="Shift+Alt+F 快捷格式化">格式化</button>
                    </div>                    
                    <div class="input-group-prepend">
                        <select class="custom-select" id="seLang">
                            <option value="javascript">JS</option>
                            <option value="typescript">TypeScript</option>
                            <option value="html">HTML</option>
                            <option value="html-vue">VUE</option>
                            <option value="html-angular">Angular</option>
                            <option value="css">CSS</option>
                            <option value="less">LESS</option>
                            <option value="scss">SCSS</option>
                            <option value="json">JSON</option>
                            <option value="json-json5">JSON5</option>
                            <option value="markdown">Markdown</option>
                            <option value="yaml">YAML</option>
                            <option value="graphql">GraphQL</option>
                        </select>
                    </div>
                    <div class="input-group-prepend pt-2 pl-3 text-muted">
                        自动保存，可拖拽文件打开
                    </div>
                </div>
            </div>
            <div id="editor" class="border overflow-hidden position-relative">
                <i class="fa fa-arrows-alt fa-fw me-full-btn" title="Switch the full screen"></i>
            </div>
        </div>
    </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/prettier@2.2.1/standalone.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/prettier@2.2.1/parser-angular.js'></script>
<script src='https://cdn.jsdelivr.net/npm/prettier@2.2.1/parser-babel.js'></script>
<script src='https://cdn.jsdelivr.net/npm/prettier@2.2.1/parser-flow.js'></script>
<script src='https://cdn.jsdelivr.net/npm/prettier@2.2.1/parser-glimmer.js'></script>
<script src='https://cdn.jsdelivr.net/npm/prettier@2.2.1/parser-graphql.js'></script>
<script src='https://cdn.jsdelivr.net/npm/prettier@2.2.1/parser-html.js'></script>
<script src='https://cdn.jsdelivr.net/npm/prettier@2.2.1/parser-markdown.js'></script>
<script src='https://cdn.jsdelivr.net/npm/prettier@2.2.1/parser-postcss.js'></script>
<script src='https://cdn.jsdelivr.net/npm/prettier@2.2.1/parser-typescript.js'></script>
<script src='https://cdn.jsdelivr.net/npm/prettier@2.2.1/parser-yaml.js'></script>
<script src='https://cdn.jsdelivr.net/npm/monaco-editor@0.23.0/min/vs/loader.js'></script>

<script>
    require.config({
        paths: {
            vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.23.0/min/vs'
        },
        'vs/nls': { availableLanguages: { '*': 'zh-cn' } }
    });
</script>
                        


<script>

    require(['vs/editor/editor.main'], function () {

        var defaultContent = ss.lsStr("vscode-content") || '',
            defaultLang = ss.lsStr("vscode-lang") || 'javascript',
            formatterLang = ss.lsStr("formatter-lang") || 'javascript';

        window.ee = monaco.editor.create(document.getElementById("editor"), ss.meConfig({
            value: defaultContent,
            language: defaultLang
        }));

        ee.onDidChangeModelContent(function (e) {
            clearTimeout(window.defer1);
            window.defer1 = setTimeout(function () {
                var txt = ee.getValue();
                ss.ls["vscode-content"] = txt;
                ss.lsSave();
            }, 1000 * 1)
        });

        //快捷键
        ee.addCommand(monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.KEY_F, function () {
            $('#btnFormatter')[0].click();
        })
        ee.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F, function () {
            $('#btnFormatter')[0].click();
        })

        //切换语言
        $('#seLang').change(function () {
            var lang = this.value.split('-')[0];

            var oldModel = ee.getModel();
            var newModel = monaco.editor.createModel(ee.getValue(), lang);
            ee.setModel(newModel);
            if (oldModel) {
                oldModel.dispose();
            }

            ss.ls["formatter-lang"] = this.value;
            ss.ls["vscode-lang"] = lang;
            ss.lsSave();
        }).val(formatterLang);

        //格式化
        $('#btnFormatter').click(function () {
            var fmlang = $('#seLang').val().split('-').pop();
            var code = ee.getValue();
            if (code != "") {
                try {
                    ee.setValue(prettier.format(code, {
                        parser: fmlang,
                        plugins: prettierPlugins
                    }))
                } catch (e) {
                    console.log(e);
                    jz.msg("ERROR");
                }
            }
        });

        $(window).on('load resize', function () {
            var ch = $(window).height() - $('#editor').offset().top - 15;
            $('#editor').css('height', Math.max(200, ch));
        });

        //接收文件
        ss.receiveFiles(function (files) {
            var file = files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                ee.setValue(e.target.result);
            };
            reader.readAsText(file);
        });
    });
</script>
        </div>
</body>
</html>
